<template>
	<view>
		<view style="padding: 0 30rpx;background-color: white;">
			<u-form :model="form" ref="uForm" label-width="auto">
				<!-- 开票金额 -->
				<u-form-item label="开票金额" prop="invoice_amount" required>
					<u-input placeholder="请输入开票金额" v-model="form.total_amount" />
				</u-form-item>
				<u-form-item label="发票类型" prop="invoice_type" required>
					<u-radio-group v-model="form.invoice_type">
						<u-radio v-for="(item, index) in [{value:1,name:'数电普通发票'},{value:2,name:'数电专用发票'}]" :key="index"
							:name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- 发票号 -->
				<u-form-item label="名称" prop="buyer_name" required>
					<u-input placeholder="请输入名称" v-model="form.buyer_name" />
				</u-form-item>

				<!-- 税号 -->
				<u-form-item label="税号" >
					<u-input placeholder="请输入名称" v-model="form.buyer_code" />
				</u-form-item>
				<!-- 地址 -->
				<u-form-item label="地址" >
					<u-input placeholder="请输入地址" v-model="form.buyer_address" />
				</u-form-item>
				<!-- 电话 -->
				<u-form-item label="电话" >
					<u-input placeholder="请输入电话" v-model="form.buyer_tel" />
				</u-form-item>
				<!-- 开户银行 -->
				<u-form-item label="开户银行" >
					<u-input placeholder="请输入开户银行" v-model="form.buyer_bank" />
				</u-form-item>
				<!-- 银行账户 -->
				<u-form-item label="银行账户" >
					<u-input placeholder="请输入银行账户" v-model="form.buyer_account" />
				</u-form-item>
				<!-- 请输入备注 -->
				<u-form-item label="请输入备注" >
					<u-input type="textarea" placeholder="请输入备注" v-model="form.remark" />
				</u-form-item>
				<!-- 上传发票 -->
				<u-form-item label="请上传发票" prop="remark" required :border-bottom="false">
					<view v-if="!form.file_url">
						<text style="color: #2979ff;font-weight: bold;" @click="choosePDF">上传发票</text>
					</view>
					<view v-if="form.file_url" style="width: 100%;display: flex;justify-content: space-between;">
						<text style="color: #19be6b;">已上传</text>
						<text style="color: #2979ff;font-weight: bold;" @click="showPDF">查看</text>
						<text style="color: #fa3534;font-weight: bold;" @click="deletePDFFile">删除</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 关联订单 -->
		<view height="80" bg-color="#F4F5F6">
			<view
				style="padding: 20rpx 30rpx;display: flex;justify-content: space-between;color: #303133;font-size: 28rpx;">
				<text style="">关联订单</text>
				<text style="color: #ff9900;">点击已选择的订单可移除</text>
				<text style="color: #2979ff;" @click="toSelectOrderPage">选择</text>
			</view>
		</view>
		<view style="background-color: white;">
			<u-cell-group>
				<u-cell-item :arrow="false" v-for="(item,idx) in form.orders" @click="()=>{
					form.orders.splice(idx,1)
				}">
					<view slot="title" style="width: 580rpx;display: flex;justify-content: space-between;">
						<text>{{item.orders_num}}</text>
						<text>{{item.car_num}}</text>
					</view>
					<text slot="right-icon" class="currency" style="color: #000;font-weight: bold;">
						{{item.total_amount}}
					</text>
					<view slot="label">
						<view style="display: flex;">
							<text style="" v-if="item.custom_name">{{item.custom_name}}</text>
							<text style="" v-else></text>
							<text style=" margin-left: 30rpx;" v-if="item.custom_tel">{{item.custom_tel}}</text>
							<text style=" margin-left: 30rpx;" v-else></text>
						</view>
						<view style="display: flex;" class="ellipsis">
							<text>{{strToFormat(item.take_date)}}</text>
							<u-icon name="arrow-rightward" style="margin: 0 10rpx;"></u-icon>
							<text>{{strToFormat(item.return_date)}}</text>
							<text>（{{strDateToTime2(item.take_date,item.return_date)}}）</text>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-form-item>
			<u-button type="primary" @click="onSubmit">提交发票</u-button>
		</u-form-item>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	import dateUtils from '../../utils/dateUtils.js'
	export default {
		data() {
			return {
				kpsq:null,
				host: 'https://cos2.ksmeilv.com',
				fileList: [],
				form: {
					kpsq_id: '',
					invoice_amount: '',
					invoice_type: null,
					buyer_name: '',
					buyer_code: '',
					buyer_address: '',
					buyer_tel: '',
					buyer_bank: '',
					buyer_account: '',
					remark: '',
					file_url: '',
					orders: []
				},
				rules: {
					invoice_amount: [{
						required: true,
						message: '请输入开票金额',
						trigger: ['blur', 'change']
					}],
					invoice_type: [{
						required: true,
						type: 'number',
						message: '请选择发票类型',
						trigger: ['blur', 'change']
					}],

					buyer_name: [{
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					}],
					buyer_code: [{
						required: true,
						message: '请输入税号',
						trigger: ['blur', 'change']
					}],
					buyer_address: [{
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					}],
					buyer_tel: [{
						required: true,
						message: '请输入电话',
						trigger: ['blur', 'change']
					}],
					buyer_bank: [{
						required: true,
						message: '请输入开户银行',
						trigger: ['blur', 'change']
					}],
					buyer_account: [{
						required: true,
						message: '请输入银行账户',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			console.log(options.kpsq_id);
			if (options.kpsq_id) {
				this.form.kpsq_id = options.kpsq_id;
				this.getOrderInfo();
			}
		},
		mounted() {
			var that = this;
			uni.$on('returnSelectedOrders', function(orders) {
				that.form.orders.push(orders);
			});
		},
		methods: {
			onSubmit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$http.post('/invoiceInfo/insert', that.form, (res) => {
							if (res.data.success) {
								that.$refs.uToast.show({
									title: '成功',
									type: "success"
								});
								uni.navigateBack();
							} else {
								that.refs.myModal.show('请求失败', res.data.result.message);
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			deletePDFFile() {
				this.form.file_url = '';
				this.$refs.uForm.resetFields();
			},
			showPDF() {
				var that = this;
				uni.navigateTo({
					url: '/pages/showPDFPage/showPDFPage?url=' + (that.host + that.form.file_url)
				})
			},
			// 选择PDF文件
			choosePDF() {
				const that = this;
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['pdf'], // 限制只能选择PDF文件
					success(res) {
						const tempFile = res.tempFiles[0];
						var list = [{
							url: tempFile.path,
							file: tempFile
						}];
						var dir = '/static/file/file_url/';
						cos.uploadFiles(list, dir, (data) => {
							var img_keys = data.files.map(item => item.options.Key);
							that.$http.post('/vehicleLicense/vatInvoiceOCRRequest', {
								url: that.host + img_keys
							}, (res) => {
								if (res.data.success) {
									var kpsq_id=that.form.kpsq_id;
									var orders = that.form.orders;
									that.form ={...that.form,...res.data.result} ;
									if(that.kpsq){
										that.form.buyer_address=that.kpsq.dz;
										that.form.buyer_tel=that.kpsq.dh;
										that.form.buyer_bank=that.kpsq.khyh;
										that.form.buyer_account=that.kpsq.yhzh;
									}
									// that.form.buyer_name = res.data.result.buyer_name;
									// that.form.buyer_code = res.data.result.buyer_code;
									that.form.orders = orders;
									that.form.kpsq_id=kpsq_id;
									that.form.file_url = img_keys.toString();
								} else {
									that.refs.myModal.show('请求失败', res.data.result.message);
								}
							});
						});

						// that.filePath = tempFile.path;
						// that.fileName = tempFile.name;
						// that.fileSize = tempFile.size;

					},
					fail(err) {
						console.error('选择文件失败:', err);
						uni.showToast({
							title: '选择文件失败',
							icon: 'none'
						});
					}
				});
			},
			strToFormat(strDate) {
				return dateUtils.strToFormat(strDate);
			},
			strDateToTime2(take_date, return_date) {
				return dateUtils.strDateToTime2(take_date, return_date);
			},
			toSelectOrderPage() {
				uni.navigateTo({
					url: '/pages/selectOrdersAndReturnInfo/selectOrdersAndReturnInfo'
				})
			},
			getOrderInfo() {
				var that = this;
				that.$http.get('/kpsq/queryById?kpsq_id=' + this.form.kpsq_id, {}, (res) => {
					if (res.data.success) {
						var kpsq=res.data.result;
						that.kpsq=kpsq;
						console.log(kpsq);
						that.form.buyer_address=kpsq.dz;
						that.form.buyer_tel=kpsq.dh;
						that.form.buyer_bank=kpsq.khyh;
						that.form.buyer_account=kpsq.yhzh;
						that.form.invoice_type=kpsq.fplx;
						that.form.orders = res.data.result.orders;
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>